<template>
  <FormView title="表单示例" :toolbar-attrs="{ buttons: ['back', 'slot'] }">
    <template #toolbar-button>
      <ToolbarButton
        icon="el-icon-remove-outline"
        :label="disabled ? '启用表单' : '禁用表单'"
        @click="disabled = !disabled" />
      <ToolbarButton icon="el-icon-loading" label="校验表单" @click="validForm" />
      <ToolbarButton icon="el-icon-magic-stick" label="清除校验" @click="clearValid" />
      <ToolbarButton
        icon="el-icon-magic-stick"
        :label="`表单${formRequired ? '' : '不'}必填`"
        @click="formRequired = !formRequired" />
    </template>
    <FormHolder
      ref="form"
      style="height: 100%"
      label-width="120px"
      :model="entity"
      :disabled="disabled"
      :required="formRequired"
      :required-fields="['card']"
      label-position="right">
      <FormItemGroup block-title="表单表格">
        <FormInputNumber
          v-model="entity.number"
          label="输入数字"
          tips="不要乱输入"
          prop="input"
          suffix-icon="el-icon-search"
          required>
          <template #append>万元</template>
        </FormInputNumber>
        <FormInput v-model="entity.input" label="输入框" prop="input" suffix-icon="el-icon-search" required>
          <template #append>万元</template>
        </FormInput>
        <FormItem label="测试" prop="input" required>
          <ElInput v-model="entity.input" />
        </FormItem>
        <FormItem label="测试1" prop="input">
          <ElInput v-model="entity.input" />
        </FormItem>
        <FormInput
          v-model="entity.number"
          prop="input"
          label="text number"
          required
          max-length="3"
          :rules="[{ validator: checkNumberInteger, message: '请输入正整数！' }]" />
        <FormCascader v-model="entity.input" :options="options" label="Cascader" prop="input" required />
        <FormInputUser v-model="entity.user" label="用户" prop="user" required />
        <FormInputDepartment v-model="entity.department" label="部门" prop="department" required />
        <FormDatePicker v-model="entity.dp" label="日期选择" prop="dp" required />
        <FormInput v-model="entity.input" label="输入框" prop="input" required />
        <FormInputEmail v-model="entity.email" label="邮箱地址" prop="email" required />
        <FormInputIdCard v-model="entity.card" label="身份证" prop="card" required>
          <template v-if="entity.card && entity.card.length === 18 && entity.card.indexOf('1') > -1" #warn>
            11111
          </template>
        </FormInputIdCard>
        <FormInputNumber v-model="entity.number" label="任意数字" prop="number" required />
        <FormInputNumber v-model="entity.number1" label="整数" prop="number1" :precision="0" required />
        <FormInputNumber v-model="entity.number2" label="正整数" prop="number2" :precision="0" :min="0" required />
        <FormInputNumber v-model="entity.number3" label="负整数" prop="number3" :precision="0" :max="0" required />
        <FormInputPhoneNumber v-model="entity.phone" label="手机号码" prop="phone" required />
        <FormInputTime v-model="entity.time" label="时间" prop="time" required />
        <FormSelect v-model="entity.select" label="下拉框" gender prop="select" required>
          <template v-if="entity.select" #warn> 11111 </template>
        </FormSelect>
        <FormCheckboxGroup v-model="entity.ckg" label="多选框组" prop="ckg" required gender />
        <FormCheckboxGroup
          v-model="entity.ckg"
          label="多选框组"
          classic
          :options="[
            { label: '111111111111111111111111111111111111111111111111111111111111111111111111111111111', value: 1 },
            {
              label:
                '2222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222',
              value: 2
            },
            {
              label:
                '表单表格表单表格表单表格表单表格表单表格表单表格表单表格表单表格表单表格表单表格表单表格表单表格表单表格表单表格表单表格表单表格',
              value: 3
            }
          ]"
          prop="ckg"
          required
          block />
        <FormCheckboxGroup
          v-model="entity.ckg"
          label="多选框组(fillRow)"
          fill-row
          classic
          :options="[
            { label: '111111111111111111111111111111111111111111111111111111111111111111111111111111111', value: 1 },
            {
              label:
                '2222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222',
              value: 2
            },
            {
              label:
                '表单表格表单表格表单表格表单表格表单表格表单表格表单表格表单表格表单表格表单表格表单表格表单表格表单表格表单表格表单表格表单表格',
              value: 3
            }
          ]"
          prop="ckg"
          required
          block />
        <FormCheckboxGroup
          v-model="entity.ckg"
          label="多选框组(fillRow+ellipsis)"
          fill-row
          ellipsis
          classic
          :options="[
            { label: '111111111111111111111111111111111111111111111111111111111111111111111111111111111', value: 1 },
            {
              label:
                '2222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222',
              value: 2
            },
            {
              label:
                '表单表格表单表格表单表格表单表格表单表格表单表格表单表格表单表格表单表格表单表格表单表格表单表格表单表格表单表格表单表格表单表格',
              value: 3
            }
          ]"
          prop="ckg"
          required
          block />
        <FormRadioGroup v-model="entity.rg" label="单选框组" gender prop="rg" required />
        <FormRadioGroup
          v-model="entity.rg"
          label="单选框组(默认)"
          classic
          :options="[
            { label: '111111111111111111111111111111111111111111111111111111111111111111111111111111111', value: 1 },
            {
              label:
                '2222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222',
              value: 2
            },
            {
              label:
                '表单表格表单表格表单表格表单表格表单表格表单表格表单表格表单表格表单表格表单表格表单表格表单表格表单表格表单表格表单表格表单表格',
              value: 3
            }
          ]"
          prop="ckg"
          required
          block />
        <FormRadioGroup
          v-model="entity.rg"
          label="单选框组(fillRow)"
          fill-row
          classic
          :options="[
            { label: '111111111111111111111111111111111111111111111111111111111111111111111111111111111', value: 1 },
            {
              label:
                '2222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222',
              value: 2
            },
            {
              label:
                '表单表格表单表格表单表格表单表格表单表格表单表格表单表格表单表格表单表格表单表格表单表格表单表格表单表格表单表格表单表格表单表格',
              value: 3
            }
          ]"
          prop="ckg"
          required
          block />
        <FormRadioGroup
          v-model="entity.rg"
          label="单选框组(fillRow+ellipsis)"
          fill-row
          ellipsis
          classic
          :options="[
            { label: '111111111111111111111111111111111111111111111111111111111111111111111111111111111', value: 1 },
            {
              label:
                '2222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222',
              value: 2
            },
            {
              label:
                '表单表格表单表格表单表格表单表格表单表格表单表格表单表格表单表格表单表格表单表格表单表格表单表格表单表格表单表格表单表格表单表格',
              value: 3
            }
          ]"
          prop="ckg"
          required
          block />
        <FormCheckboxGroup
          v-model="entity.ckg"
          label="多选框组"
          prop="ckg"
          required
          other-val="女"
          other-prop="input"
          :other.sync="entity.input"
          block
          gender>
          <template #below>
            <FormRadioGroup v-model="entity.rg" :wrap-col="false" gender />
          </template>
        </FormCheckboxGroup>
        <FormInputTag v-model="entity.tag" label="标签" prop="tag" required />
        <FormTable
          v-model="entity.rows"
          label="表单表格"
          prop="rows"
          editable
          style="margin-bottom: 20px"
          :columns="columns" />
        <FormTable v-model="entity.rows" prop="rows" :columns="columns" @add-row="showPicker1" />
        <FormTextarea v-model="entity.textarea" label="文本域" prop="textarea" required />
        <!--<FormAttachment v-model="entity.unid" label="一类附件" prop="unid" required/>-->
      </FormItemGroup>
      <FormItemGroup block-title="用户部门">
        <FormInputUser
          :id.sync="entity.userId"
          prefix-pick
          label="单个用户"
          prop="userId"
          :name.sync="entity.userName"
          required />
        <FormInputUser
          :id.sync="entity.userId"
          prefix-pick
          label="单个用户(自定义风格)"
          prop="userId"
          :name.sync="entity.userName"
          required>
          <template #single="{ showPicker, userName }">
            <ElInput
              placeholder="请选择人员"
              readonly
              suffix-icon="el-icon-search"
              :value="`${userName ? `${userName}你好!` : ''}`"
              @click.native="showPicker()" />
          </template>
        </FormInputUser>
        <FormInputDepartment
          :id.sync="entity.ouId"
          prefix-pick
          label="单个部门"
          prop="ouId"
          :name.sync="entity.ouName"
          required />
        <FormInputDepartment
          :id.sync="entity.ouId"
          prefix-pick
          label="单个部门(自定义风格)"
          prop="ouId"
          :name.sync="entity.ouName"
          required>
          <template #single="{ showPicker, departmentName }">
            <ElInput
              placeholder="请选择部门"
              readonly
              suffix-icon="el-icon-search"
              :value="`${departmentName ? `你选择了[${departmentName}]` : ''}`"
              @click.native="showPicker()" />
          </template>
        </FormInputDepartment>
        <FormInputUser v-model="entity.users" label="多个用户(自定义风格)" prop="users" multiple>
          <template #multiple="{ showPicker, users }">
            <ElInput
              placeholder="请选择人员"
              readonly
              suffix-icon="el-icon-search"
              :value="users.map(value => value.name).join(' | ')"
              @click.native="showPicker()" />
          </template>
        </FormInputUser>
        <FormInputDepartment v-model="entity.departments" label="多个部门(自定义风格)" prop="departments" multiple>
          <template #multiple="{ showPicker, departments }">
            <ElInput
              placeholder="请选择部门"
              readonly
              suffix-icon="el-icon-search"
              :value="departments.map(value => value.name).join(' | ')"
              @click.native="showPicker()" />
          </template>
        </FormInputDepartment>
        <FormInputUser v-model="entity.users" label="多个用户" prop="users" multiple />
        <FormInputDepartment v-model="entity.departments" label="多个部门" prop="departments" multiple />
        <FormInputUser v-model="entity.users" label="多个用户(tag-style)" prop="users" multiple tag-style />
        <FormInputDepartment
          v-model="entity.departments"
          label="多个部门(tag-style)"
          prop="departments"
          multiple
          tag-style />
      </FormItemGroup>
      <FormItemGroup block-title="日期时间">
        <FormDatePicker v-model="year" year label="年" />
        <FormItem label="值">
          {{ year || 1 }}
        </FormItem>

        <FormDatePicker v-model="monthRange" label="月份范围" month-range :split="false" />
        <FormDatePicker v-model="month" month label="月份" />
        <FormItem label="值">
          {{ monthRange }}
        </FormItem>
        <FormItem label="值">
          {{ month || 1 }}
        </FormItem>

        <FormDatePicker v-model="dateRange" label="日期范围" date-range :split="false" />
        <FormDatePicker v-model="date" label="日期" />
        <FormItem label="值">
          {{ dateRange }}
        </FormItem>
        <FormItem label="值">
          {{ date || 1 }}
        </FormItem>

        <FormDatePicker v-model="dateTimeRange" label="时间范围" date-time-range :split="false" />
        <FormDatePicker v-model="dateTime" date-time label="时间" />
        <FormItem label="值">
          {{ dateTimeRange }}
        </FormItem>
        <FormItem label="值">
          {{ dateTime || 1 }}
        </FormItem>

        <FormDatePicker v-model="week" week label="周" />
        <FormItem label="值">
          {{ week || 1 }}
        </FormItem>

        <FormDatePicker v-model="dates" dates label="多个日期" />
        <FormItem label="值">
          {{ dates || 1 }}
        </FormItem>
      </FormItemGroup>
      <FormItemGroup block-title="成功提示">
        <ElCol :sm="12" :lg="6">
          <ElResult icon="success" title="成功提示" sub-title="请根据提示进行操作">
            <template #extra>
              <ElButton type="primary" size="medium">返回</ElButton>
            </template>
          </ElResult>
        </ElCol>
        <ElCol :sm="12" :lg="6">
          <ElResult icon="warning" title="警告提示" sub-title="请根据提示进行操作">
            <template #extra>
              <ElButton type="primary" size="medium">返回</ElButton>
            </template>
          </ElResult>
        </ElCol>
        <ElCol :sm="12" :lg="6">
          <ElResult icon="error" title="错误提示" sub-title="请根据提示进行操作">
            <template #extra>
              <ElButton type="primary" size="medium">返回</ElButton>
            </template>
          </ElResult>
        </ElCol>
        <ElCol :sm="12" :lg="6">
          <ElResult icon="info" title="信息提示" sub-title="请根据提示进行操作">
            <template #extra>
              <ElButton type="primary" size="medium">返回</ElButton>
            </template>
          </ElResult>
        </ElCol>
      </FormItemGroup>
      <FormItemGroup block-title="信息描述" :wrap-row="false">
        <ElDescriptions title="用户信息">
          <ElDescriptionsItem label="用户名">kooriookami</ElDescriptionsItem>
          <ElDescriptionsItem label="手机号">18100000000</ElDescriptionsItem>
          <ElDescriptionsItem label="居住地">苏州市</ElDescriptionsItem>
          <ElDescriptionsItem label="备注">
            <ElTag size="small">学校</ElTag>
          </ElDescriptionsItem>
          <ElDescriptionsItem label="联系地址">江苏省苏州市吴中区吴中大道 1188 号</ElDescriptionsItem>
        </ElDescriptions>
      </FormItemGroup>
      <FormItemGroup block-title="内容为空" :wrap-row="false">
        <ElEmpty description="描述文字" />
      </FormItemGroup>
    </FormHolder>
  </FormView>
</template>

<script>
  import { showDataTablePicker } from '@/util/table'
  // import { getPage } from '@/views/module/talent-pool/talent-recommendation/api'
  import { scrollIntoRequiredField } from '@web-utils/core'
  import { checkNumberInteger } from '@/util/form-validate'
  import { Result } from 'element-ui'

  const options = [
    {
      label: '党内法规制度',
      value: '1472854526194987010',
      flFullCode: 'A1',
      flFullName: '党内法规制度',
      code: 'A1',
      children: [
        {
          label: '准则',
          value: '1473216347791802369',
          flFullCode: 'A1.A3',
          flFullName: '党内法规制度.准则',
          code: 'A3',
          children: [
            {
              label: '测试文件',
              value: '1473206935714832386',
              flFullCode: 'A1.A3.B2',
              flFullName: '党内法规制度.准则.测试文件',
              code: 'B2',
              children: [
                {
                  label: '党章',
                  value: '1472854967528042497',
                  flFullCode: 'B1.B2.A2',
                  flFullName: '集团文件.测试文件.党章',
                  code: 'A2',
                  children: []
                }
              ]
            },
            {
              label: '第一层',
              value: '1495662702698344449',
              flFullCode: 'A1.A3.A1645428744000',
              flFullName: '党内法规制度.准则.第一层',
              code: 'A1645428744000',
              children: [
                {
                  label: '第二层',
                  value: '1495662777164017665',
                  flFullCode: 'A1645428744000.A1645428762000',
                  flFullName: '第一层.第二层',
                  code: 'A1645428762000',
                  children: [
                    {
                      label: '第三层',
                      value: '1496664574030032897',
                      flFullCode: 'A1645428744000.A1645428762000.A1645667599000',
                      flFullName: '第一层.第二层.第三层',
                      code: 'A1645667599000',
                      children: []
                    }
                  ]
                }
              ]
            }
          ]
        }
      ]
    },
    {
      label: '集团文件',
      value: '1473206775819575297',
      flFullCode: 'B1',
      flFullName: '集团文件',
      code: 'B1',
      children: []
    }
  ]
  export default {
    name: 'FormNavDemo',
    components: { ElResult: Result },
    data() {
      return {
        disabled: false,
        formRequired: false,
        options,
        entity: {
          userId: null,
          userName: '',
          users: [],
          ouId: null,
          ouName: '',
          departments: [],
          rows: [],

          unid: null,
          ckg: null,
          dp: null,
          input: null,
          department: null,
          email: null,
          card: null,
          number: undefined,
          number1: undefined,
          number2: undefined,
          number3: undefined,
          phone: null,
          tag: null,
          time: null,
          user: null,
          rg: null,
          select: null,
          table: null,
          textarea: null
        },
        year: null,
        month: null,
        date: null,
        dates: null,
        week: null,
        dateTime: null,
        dateTimeRange: [],
        dateRange: [],
        monthRange: [],
        columns: [
          {
            label: '人员姓名',
            type: 'member',
            prop: 'userName',
            required: true,
            single: true,
            setValue(row, val) {
              if (val?.length) {
                const { id: userId, name: userName, ouId, ouName } = val[0]
                row.userId = userId
                row.userName = userName
                row.ouId = ouId
                row.ouName = ouName
              } else {
                row.userId = null
                row.userName = null
                row.ouId = null
                row.ouName = null
              }
            },
            attrs: {
              clearable: true,
              convert: false
            }
          },
          {
            label: '姓名',
            type: 'user',
            prop: 'userName',
            required: true,
            single: true,
            setValue(row, val) {
              if (val?.length) {
                const { id: userId, name: userName, ouId, ouName } = val[0]
                row.userId = userId
                row.userName = userName
                row.ouId = ouId
                row.ouName = ouName
              } else {
                row.userId = null
                row.userName = null
                row.ouId = null
                row.ouName = null
              }
            },
            attrs: {
              clearable: true,
              convert: false
            }
          },
          {
            label: '单位及部门',
            type: 'department',
            required: true,
            prop: 'ouName',
            single: true,
            setValue(row, val) {
              if (val?.length) {
                const { id: ouId, ouName } = val[0]
                row.ouId = ouId
                row.ouName = ouName
              } else {
                row.ouId = null
                row.ouName = null
              }
            },
            attrs: {
              clearable: true,
              convert: false
            }
          },
          {
            label: '职务',
            type: 'select',
            required: true,
            prop: 'jobTitle',
            attrs: {
              options: [
                {
                  name: '党委书记',
                  code: '01'
                },
                {
                  name: '党委副书记',
                  code: '02'
                },
                {
                  name: '党委委员',
                  code: '03'
                },
                {
                  name: '纪委书记',
                  code: '04'
                },
                {
                  name: '纪委副书记',
                  code: '05'
                },
                {
                  name: '纪委委员',
                  code: '06'
                },
                {
                  name: '局长',
                  code: '07'
                },
                {
                  name: '主任',
                  code: '08'
                }
              ]
            }
          },
          {
            label: 'Cascader',
            type: 'cascader',
            required: true,
            prop: 'cascader',
            attrs: { options }
          }
        ]
      }
    },
    methods: {
      checkNumberInteger,
      async validForm() {
        try {
          const valid = await this.$refs.form.validate()
          if (valid) {
            this.$message.success('表单校验通过！')
          }
        } catch (e) {
          await scrollIntoRequiredField(this)
        }
      },
      async showPicker1() {
        // 方法调用
        await showDataTablePicker(
          {
            api: null,
            multiple: true,
            title: '测试',
            columns: [
              {
                prop: 'statusCn',
                label: '状态'
              },
              {
                prop: 'name',
                label: '姓名'
              },
              {
                prop: 'sex',
                label: '性别'
              }
            ]
          },
          {
            confirm: this.confirm
          }
        )
      },
      confirm(rows) {
        this.entity.rows.push(...rows)
      },
      clearValid() {
        this.$refs.form.clearValidate()
      }
    }
  }
</script>
